<!doctype html>
<html class="no-js">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

  <title>萌宠之家-C2B2C社会化电商平台->运营后台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="../statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="../statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="../statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="../statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/admin.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/app.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="../statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="../statics/AmazeUI/assets/js/amazeui.min.js"></script>
  <script src="../statics/AmazeUI/assets/js/amazeui.modal.js"></script>
  <script src="../statics/js/list.js"></script>
  <!-- 百度编辑器
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.all.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
      var ue = UE.getEditor('editor',{
              initialFrameWidth:"100%" //初始化选项
              //scaleEnabled:true//scaleEnabled {Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
          }
      );
  </script>
   -->
  <script src="../statics/AmazeUI/assets/js/validator.js"></script>
  <script src="../statics/js/plugin/jquery.livequery.js"></script>
  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="../statics/js/plugin/jquery.form.js"></script>
  <script>
      $().ready( function() {
          AMUI.plugin('mySelected', AMUI.selected);
          $('[data-am-selected]').mySelected({btnWidth: '100%', maxHeight: '200px', btnSize: 'sm', btnStyle: 'secondary'});
      });
  </script>

  <script src="../statics/js/plugin/jquery.metadata.js"></script>
  <script src="../statics/js/base.js"></script>
  <script src="../statics/js/jquery.lSelect.js"></script>
  <!-- 公共head End -->
</head>
<body>
<!-- content start -->
<div class="admin-content">
  <div class="admin-content-body">
    <div class="am-cf app-padding-title">
      <div class="am-fl am-cf">
        <strong class="am-text-primary am-text-lg">商品管理</strong> / <small>商品分类</small>
      </div>
    </div>
	
    <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
	  
    <form id="addForm" class="validator-form" callback="addFormAjaxSubmit()" action="http://localhost:8080/category/add" method="post">
    <input type="hidden" id="id" name="id" value="" />
    <input type="hidden" id="token" name="token" value="" />
    <div class="am-form am-margin am-form-horizontal" >
      <div class="am-form-group am-form-group-sm">
        <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">分类名称</label>
        <div class="am-u-sm-8 am-u-md-9">
          <input type="text" class="am-form-field" id="name" name="name" value="" required />
        </div>
      </div>
      <div class="am-form-group am-form-group-sm">
        <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">上级分类</label>
        <div class="am-u-sm-8 am-u-md-9">
          <select name="parentId" id="parentId" data-am-selected="{btnWidth: '100%', maxHeight: '200px', btnSize: 'sm', btnStyle: 'secondary'}" placeholder="请选择分类">
          </select>
        </div>
      </div>
      <div class="am-form-group am-form-group-sm">
        <label class="am-u-sm-4 am-u-md-3 am-text-right am-form-label">排序</label>
        <div class="am-u-sm-8 am-u-md-9">
          <input type="number" class="am-form-field" id="orderNo" name="orderNo" value="" placeholder="只允许输入正整数" min="1" max="1000" required />
        </div>
      </div>
      <hr data-am-widget="divider" class="am-divider am-divider-dashed" />
      <div class="am-form-group am-form-group-sm">
        <div class="am-u-sm-8 am-u-sm-offset-4 am-u-md-9 am-u-md-offset-3">
          <button type="submit" class="am-btn am-btn-primary"><span class="am-icon-save">  保  存</span></button>
          <button type="button" class="am-btn am-btn-default" onclick="window.history.back(); return false;"><span class="am-icon-undo">  返  回</span></button>
        </div>
      </div>
    </div>
    </form>
  </div>
</div>
<!-- content end -->
</body>
<script>
    // 商品分类列表
    let categoryList = new Array();

    let jsonUser;
    let token;

    // 分类id
    let categoryId = GetQueryString('id');

$().ready(function() {

    // 判断用户信息和token是否存在
    jsonUser = sessionStorage.getItem("admin");
    token = sessionStorage.getItem("token");

    if(!jsonUser || !token) {
        top.location.href = 'admin_login.html';
        return;
    }

    // 判断当前页面是否在框架页中，如果不存在，就跳转到后台中心页面
    if(self.location == top.location)
        location.href='admin_center.html';

    // 设置token
    $('#token').val(token);

    // 加载'商品分类'列表数据
    loadCategoryList();

    // 查看是否存在分类id
    if( categoryId ) {
        // 如果存在分类id，就加载分类信息
        loadCategoryInfo();
    }

});// $().ready(function());

/** '保存表单' Ajax提交 **/
function addFormAjaxSubmit(){

    // '保存表单'提交
    $("#addForm").ajaxSubmit({
         success:function(result){

             // 如果返回的是token失效，就重新登录
             if(result.code == 419) {

                 Modal.confirm('当前会话token失效，请重新登录页面！', {
                     closeViaDimmer: false,
                     onConfirm: function() {
                         top.location.href = 'admin_login.html';
                     },
                     onCancel: function() {
                         top.location.href = 'admin_login.html';
                     }
                 });// Modal.confirm();

                 return;
             }// if(result.code == 419);

             // 如果返回的数据的响应码不是'成功(200)'
             if(result.code != 200) {
                 Modal.alert(result.msg);
                 return;
             }

             // 如果返回的数据响应码为200
             Modal.confirm('商品分类保存成功！', {
                 closeViaDimmer: false,
                 onConfirm: function() {
                     location.href = 'product_category_list.html';
                 },
                 onCancel: function() {
                     location.href = 'product_category_list.html';
                 }
             });// Modal.confirm();

         }// success(result);
     });// $("#addForm").ajaxForm();

}// addFormAjaxSubmit();

/** 根据分类id，查找分类信息 **/
function loadCategoryInfo(){

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/get',
        async: false,
        data: {token:token, id:categoryId},
        success: function (result) {

            // 如果返回的是token失效，就重新登录
            if (result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'admin_login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'admin_login.html';
                    }
                });// Modal.confirm();

                return;
            }
            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 填充分类信息数据
            fillCategoryInfo(result.data);
        }

    });// $.ajax();

}// loadCategoryInfo();

/** 填充商品分类信息 **/
function fillCategoryInfo( category ) {

    // 设置表单提交url
    $('#addForm').attr('action', 'http://localhost:8080/category/update');

    // id
    $('#id').val(category.id);
    // token
    $('#token').val(token);
    // 分类名称
    $('#name').val(category.name);
    // 上级分类
    $('#parentId').val(category.parentId);
    // 排序号
    $('#orderNo').val(category.orderNo);

}// fillCategoryInfo( category );

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

            // 填充表格数据
            fillCategoryList();
        }// success()p

    });// $.post();

}// loadCategoryList();

/** 填充表格数据 **/
function fillCategoryList( ) {

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果找到匹配的数据字典项的parentId
        if( category.parentId == 0 ) {

            // 就将数据字典项添加到<select>下拉框中
            let optItem = '<option value="' + category.id + '">'+ category.name +'</option>';
            $('#parentId').append(optItem);

        }//if();

    }// for();

}// fillCategoryList();
</script>
</html>
